<!DOCTYPE html>
<html>
<head>
    <title>文字形状</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/three.js"></script>
    <!--<script type="text/javascript" src="../js/helvetiker_regular.typeface.js"></script>-->
</head>
<body onload="init()">
<canvas id="mainCanvas" style="width: 800px;height: 600px;"></canvas>
</body>
<script>
    /* 文字形状
    *   导入相关helvetiker_regular.typeface.js包
    *   TextGeometry(text,parameters);
    *   text:文字字符串
    *   parameters:
    *       size:字体大小
    *       height:字体厚度
    *       curveSegments:弧线分段数
    *       font:字体
    *       weight:字体粗细
    *       style:字体斜体
    *       bevelEnabled:布尔值，是否使用倒角
    *       bevelThickness:倒角厚度
    *       bevelSize:倒角宽度
    * */
    function init(){
        var scene = new THREE.Scene();

        var renderer = new THREE.WebGLRenderer({
            canvas:document.getElementById('mainCanvas')
        });
        renderer.setClearColor(0x000000);
        //OrthographicCamera()
        var camera = new THREE.OrthographicCamera(-2.5,2.5,1.875,-1.875,0.1,100);
        camera.position.set(5,5,20);
        camera.lookAt(new THREE.Vector3(1,0,0));
        scene.add(camera);

        var material = new THREE.MeshBasicMaterial({
            color: 0xffff00,
            wireframe: true
        });
        // load font
        var loader = new THREE.FontLoader();
        loader.load('../js/helvetiker_regular.typeface.js', function(font) {
            var mesh = new THREE.Mesh(new THREE.TextGeometry('Hello', {
                font: font,
                size: 1,
                height: 1
            }), material);
            scene.add(mesh);
            // render
            renderer.render(scene, camera);
        });

    }
</script>
</html>